<!--
 * @Description: 登录页面
 * @Author: Gaq
 * @Date: 2022-10-13 23:24:55
 * @LastEditTime: 2022-11-01 22:00:41
 * @LastEditors: Gaq
-->
<template>
  <div
    style="
      width: 400px;
      margin: 150px auto;
      padding: 50px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      position: relative;
    "
  >
    <h3 style="text-align: center; font-size: 30px; margin-bottom: 50px">
      天工开物-管理员
    </h3>

    <el-form :model="user" label-width="120px">
      <el-form-item label="用户账号">
        <el-input v-model="user.account" />
      </el-form-item>

      <el-form-item label="用户密码">
        <el-input v-model="user.password" show-password />
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: center">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button style="margin-left: 45px" @click="cancle">取消</el-button>
      </el-form-item>
    </div>
  </div>
</template>


<script setup>
import request from "@/utils/request";
import router from "@/router";

onBeforeMount(() => {
  bus.emit("ifShow", false);
});

const user = reactive({
  account: "",
  password: "",
  role: "admin",
});

const onSubmit = () => {
  request.post("/user/login", user).then((res) => {
    localStorage.setItem("token", res.data.token);
    localStorage.setItem("user", JSON.stringify(res.data.user));
    router.push({
      path: "/adminCenter",
    });
  });
};

const cancle = () => {
  user.account = "";
  user.password = "";
};
</script>

<style lang="less" scoped>
.msg {
  font-size: x-small;
  position: absolute;
  right: 50px;
  bottom: 10px;

  :hover {
    text-decoration: underline;
    cursor: pointer;
    color: rgb(123, 190, 238);
  }
}
</style>